<link rel="stylesheet" media="screen" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">

<div class="form">
  <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/singleEdit')}">
    <dl>
      <dt> 类型：</dt>
      <dd>
          <select name="type">
            <option value="1" <if condition="$type eq '1'">selected</if>>附加保险</option>
            <option value="2" <if condition="$type eq '2'">selected</if>>附加产品</option>
            <option value="3" <if condition="$type eq '3'">selected</if>>包含单品</option>
            <option value="4" <if condition="$type eq '4'">selected</if>>赠送单品</option>
          </select>
      </dd>
    </dl>
    <dl>
      <dt>标题：</dt>
      <dd>
        <input id="title" name="title" class="inp_w550" value="{$info.title}" required type="text"/>
      </dd>
    </dl>
    <dl>
      <dt> 价格：</dt>
      <dd>
        <input id="price" name="price" class="inp_one" value="{$info.price}" required type="text"/>
      </dd>
    </dl>
    <dl>
     <dt> 图片：</dt>
     <dd>
       <div style="width: 134px; height: 134px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
         <input type="file" name="filedata" id="uploadImg" onChange="uploadPic(this,'uploadImg')" style="width:134px; height: 134px; position: absolute; right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999">
         <div  class="fileupload" style="  position: absolute;width: 134px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
            <img src="http://www.tripvip.cn{$info.uploadImg}" width='134' height='134'>
            <input type="hidden" name="uploadImg" value="{$info.uploadImg}">
         </div>
       </div>
     </dd>
    </dl>
    <div class="form_b" style="width: 300px; margin-left: 110px;">
      <button class="submit button-green" type="submit">保 存</button>
      &nbsp;
      <input type="button" onclick="goUrl('{:U(MODULE_NAME.'/Product/singleList')}')" class="button-return" value="返回产品列表">
    </div>
  </form>
</div>

<script src="/Public/plugin/validation/lib/jquery.js" type="text/javascript"></script>
<script src="/Public/plugin/validation/dist/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {


  wrapForm('uploadImg','Single');
  $("#form_do").validate({
    rules: {
        title: {
            required: true,
            maxlength: 30
           },
        price: {
            required: true
           }
        },
        messages: {
          title: {
            required: "标题不能为空",
            minlength: "标题不得超过30个字符"
          },
          price: {
            required: "价格不能为空",
          }
        }
    });

  $("#uploadImg_form").validate();


});

/**
 * [wrapForm description]
 * @param  {[type]} id   [description]
 * @param  {[type]} type [description]
 * @return {[type]}      [description]
 */
function wrapForm (id,type)
{
    $("#"+id).wrap("<form class='uploadImg' action='/Home/Public/uploadPic/fileType/Img/type/"+type+".html' method='post' enctype='multipart/form-data' id='uploadImg_form'></form>");
}
/**
 * [uploadPic description]
 * @param  {[type]} obj [description]
 * @return {[type]}     [description]
 */
function uploadPic(obj,name)
{
    if($(obj).val() == "") return;

    $(obj).parent().ajaxSubmit({
        dataType:  'json',
        beforeSend: function() {
          $(obj).parent().parent().find('.fileupload').empty();
          $(obj).parent().parent().find('.fileupload').html("正在上传中...");
        },
        success: function(data) {

          if(data.state == 'SUCCESS')
          {
              $(obj).parent().parent().find('.fileupload').empty();
              $(obj).parent().parent().find('.fileupload').html("<img src='http://www.tripvip.cn"+data.url+"' width='134' height='134'>");
              $(obj).parent().parent().find('.fileupload').append("<input type='hidden' name='"+name+"' value='"+data.url+"'>");
          }
          else
          {
              $(obj).parent().parent().find('.fileupload').html(data.msg);
          }
      },
      error:function(xhr){
        $(obj).parent().parent().find('.fileupload').html('上传失败!');
        $(obj).parent().parent().find('.fileupload').html(xhr);
      }
    });
}

</script>